<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getArticlePageList, postArticleDel } from '@/apis/apis.js'

const tableData = ref([])
const pageSize = ref(4)
const total = ref(0)
const currentPage = ref(1)
const tableRef = ref(null)
const router = useRouter()

const getData = async () => {
  try {
    const res = await getArticlePageList({
      page: currentPage.value,
      pageSize: pageSize.value
    })
    if (!res.status) {
      tableData.value = []
      total.value = 0
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      tableData.value = res.data.list
      total.value = res.data.pages.total
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
}
const handleChange = async () => {
  await getData()
}
const handleDelete = async (id) => {
  ElMessageBox.confirm(
    '确认删除？',
    '标题',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await postArticleDel({
        id: String(id)
      })
      if (!res.status) {
        ElMessage({ type: 'info', message: res.msg })
      }
      else {
        ElMessage({ type: 'success', message: res.msg })
        if (tableData.value.length <= 1) {
          currentPage.value = currentPage.value <= 1 ? 1 : currentPage.value - 1
        }
        await getData()
      }
    }
    catch (err) {
      ElMessage({ type: 'info', message: '网络异常' })
    }
  })
}
const handleSelectDelete = async () => {
  const ids = tableRef.value.getSelectionRows().map(item => item.id).join(',')
  const length = tableRef.value.getSelectionRows().length
  if (length <= 0) return
  ElMessageBox.confirm(
    '确认删除？',
    '标题',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await postArticleDel({
        id: ids
      })
      if (!res.status) {
        ElMessage({ type: 'info', message: res.msg })
      }
      else {
        ElMessage({ type: 'success', message: res.msg })
        if (length >= tableData.value.length) {
          currentPage.value = currentPage.value <= 1 ? 1 : currentPage.value - 1
        }
        await getData()
      }
    }
    catch (err) {
      ElMessage({ type: 'info', message: '网络异常' })
    }
  })
}
const handleEdit = (id) => {
  router.push(`/home/article/edit?id=${id}`)
}

onMounted(async () => {
  await getData()
})
</script>

<template>
  <el-button-group type="primary">
    <el-button icon="Plus" />
    <el-button icon="Edit" />
    <el-button icon="Delete" @click="handleSelectDelete" />
  </el-button-group>
  <el-table :data="tableData" ref="tableRef">
    <el-table-column type="selection" width="55" />
    <el-table-column label="ID" width="120" prop="id"></el-table-column>
    <el-table-column label="标题" prop="title" />
    <el-table-column label="网址" prop="url" />
    <el-table-column label="状态">
      <template #default="{ row }">
        {{ row.status === '1' ? '显示' : '隐藏' }}
      </template>
    </el-table-column>
    <el-table-column label="排序" prop="sort" />
    <el-table-column label="日期" prop="create_time" />
    <el-table-column>
      <template #default="{ row }">
        <el-button type="primary" @click="handleEdit(row.id)">编辑</el-button>
        <el-button @click="handleDelete(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next, jumper, total" :total="total" v-model:page-size="pageSize" v-model:current-page="currentPage" @change="handleChange" />
</template>

<style scoped></style>
